<template>
  <div class="tabs">
    <el-tag size="small" v-for="(tag, index) in tags" :key="tag.name" :closable="tag.name !=='home'" :effect="$route.name === tag.name ? 'dark' : 'plain'" @click="changeMenu(tag)" @close="handleClose(tag, index)" >
     {{tag.label}}
    </el-tag>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex' 

export default {
  name: 'CommonTag',
  data() {
    return {

    }
  },
  computed: {
    ...mapState({
      tags: state => state.tab.tabsList
    })
  },
  methods: {
    ...mapMutations({
      close: 'closeTag'
    }),
    changeMenu(item) {
      this.$router.push({name: item.name})
    },
    handleClose(tag, index) {
      console.log('打算关掉'+this.$route.name)
      const length = this.tags.length -1 //长度
      this.close(tag)
      if (tag.name !== this.$route.name) { //关掉的不是现在的
      console.log('关掉不是现在的'+this.$route.name)
        return;
      }
      if (index === length) {//最后一个
        this.$router.push({
          name: this.tags[index-1].name
        })
        console.log('关掉后到'+this.$route.name)
      }else {
        this.$router.push({
          name: this.tags[index].name
        })
        console.log('关掉后到'+this.$route.name)
      }
      
    }
  }
  
}
</script>
<style lang="less" scoped>
  .tabs {
    padding: 20px;
    .el-tag {
      margin-right: 15px;
      cursor: pointer;
    }
  }
</style>